<script setup lang="ts">
    import { ref, onMounted } from 'vue' //引入vue相关函数
    import { getGoodsList } from '@/api' //引入axios接口


    //定义轮播图数据对象
    const carouselList = ref()

    //获得所有轮播图
    async function getMenuList(){
        const res = await getGoodsList()
        carouselList.value = res.data.data.filter((value:any)=>value.category_id==38)
    }

    //页面组件加载完成
    onMounted(()=>{
        getMenuList()
    })
</script>

<template>
  <section>
    <el-carousel motion-blur height="350px">
        <el-carousel-item v-for="item in carouselList"><img :src="item.picture" /></el-carousel-item>
    </el-carousel>
  </section>
</template>

<style scoped>
    section, section img{
        width:1000px;
        height:350px;
    }
</style>
